<template>
  <div
    v-show="isShow"
    role="alert"
    class="el-notification right"
    style="top: 16px; z-index: 2006;"
  >
    <!--notice-->
    <div class="el-notification__group">
      <h2 class="el-notification__title">{{ title }}</h2>
      <div class="el-notification__content">
        <p v-html="content"></p>
      </div>
      <div class="el-notification__closeBtn el-icon-close" @click="close"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "default title",
      content: "default content",
      duration: 13000,
      isShow: false,
      timer: null,
    };
  },
  // dom 元素被挂载完成的时候
  mounted() {
    // console.log(this.$data);
    // console.log("dom 元素被挂载完成的时候 mounted");
    this.isShow = true;
    if (this.timer) return clearTimeOut(this.timer);
    this.timer = setTimeout(() => {
      this.isShow = false;
      document.body.removeChild(this.$el);
    }, this.duration);
  },
  methods: {},
};
</script>
